<template>
<div class="header-shouye">
  <div class="left">
    <img src="../../assets/logo.png" alt="logo" />
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <!-- 匹配 /shouye/rumen 路由 -->
      <el-tab-pane label="热门" name="ShouyeRemen"></el-tab-pane>
      <!-- 匹配 /shouye/tuijian 路由 -->
      <el-tab-pane label="推荐" name="ShouyeTuijian"></el-tab-pane>
      <!-- 匹配 /shouye/dongtai 路由 -->
      <el-tab-pane label="影视" name="ShouyeYingshi"></el-tab-pane>
      <!-- 匹配 /shouye/zhibo 路由 -->
      <el-tab-pane label="直播" name="ShouyeZhibo"></el-tab-pane>
      <!-- 匹配 /shouye/zhuifan 路由 -->
      <el-tab-pane label="追番" name="ShouyeZhuifan"></el-tab-pane>
    </el-tabs>
  </div>
  <div class="right">
    <el-input :prefix-icon="Search" placeholder="请输入内容" class="custom-input" />
    <div class="icon">
      <el-icon style="font-size: 20px;" @click="handleMinimize">
        <Minus />
      </el-icon>
      <el-icon style="font-size: 20px;" @click="handleMaximize">
        <Plus />
      </el-icon>
      <el-icon style="font-size: 20px;" @click="handleClose">
        <Close />
      </el-icon>
    </div>
  </div>
</div>
<router-view />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { TabsPaneContext } from 'element-plus';
import { Search, Minus, Plus, Close } from '@element-plus/icons-vue';

const router = useRouter();
const activeTab = ref('shouyeTuijian'); // 初始匹配默认路由
console.log(activeTab.value);
// 标签页切换逻辑
const handleTabClick = (tab: TabsPaneContext) => {
  router.push({ name: tab.paneName as string });



  activeTab.value = tab.paneName as string;

};
// 同步路由与标签激活态
watch(
  () => router.currentRoute.value.name,
  (name) => {
    activeTab.value = name as string;
  },
  { immediate: true }
);

// Electron 窗口控制（保持不变）
declare global {
  interface Window {
    api: any;
  }
}
const { window: electronWindow } = window.api;

const handleMinimize = () => {
  electronWindow?.minimize();
};
const handleMaximize = () => {
  electronWindow?.maximize();
};
const handleClose = () => {
  electronWindow?.close();
};
</script>

<style scoped>
.header-shouye {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 0 20px;
}

.left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.left img {
  height: 40px;
  width: auto;
}

.right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.custom-input {
  width: 240px;
}

.icon {
  display: flex;
  gap: 15px;
  cursor: pointer;
}

/* 标签页基础样式 */
.active-tab {
  color: #ff6699;
  /* 选中标签的文字颜色 */
  font-weight: 500;
}

/* 移除原有的::v-deep样式 */
::v-deep .el-tabs__item {
  color: #ff6699;
  font-size: 16px;
}

::v-deep .el-tabs__active-bar {
  background-color: #ff6699;
}
</style>